2 Trik dan Plugin 
Pki 


Mungkin ini adalah bagian yang paling Anda tunggu... akan ada 
banyak sekali trik-trik maupun konsep yang ditawarkan j@uery yang 
akan mampu membuat mata kita diam tak berkutik... ala lebay deh.. 
bodo amit... Kumpulan animasi trik j@uery ini didapatkan dari hasil 
kompilasi trik terdahsyat yang penulis jumpai. Oleh sebab itu.. 
cekidot.. langsung aja gan ke pembahasan pertama. 


Oh iya, sebentar gan.. ada yang kelupaan.. ada baiknya sebelum 
memulai trik j@uery tersebut, kita download dulu library-nya.. 
namanya j@Auery UI. Dapat Anda download pada situs 
http://jgueryui.com/download. Anda pilih versinya, ada baiknya 
gunakan versi terbaru, kemudian klik link Download, maka library 
akan terunduh ke dalam komputer Anda. Lihat Gambar 2.1. 


Ara wi kala. 
| Gjguery UI- Configure your download | PN Pa —. ak 
PE nan JAN Google 2 tra UK) 


ponents (31 of 31 selected) @ beselect all components 
VI Core B core The core of j@uery UI, reauired for allinteractions - 
and widrets. UI ightness - 
IM Wiaget The widget factory, base for al widgets PRO aon Jhema aU ea 
MI Mouse The mouse widget, a base class for allinteractions 


and widgets with heavy mouse interaction. 


(VI Position utility plugin for positioning elements relative to 
other elements. 


@ besele 
kkanihani IV Draggable Wakes any element on the page draggabie. 
r jOuer 

(MI Droppable Generated drop targets for draggabie elements. 

(VI Resizable Makes any element on the page resizable. 

(VI Setectable Makes a list of elements mouse selectabie by dragging 

a box or clicking on them. Lion 
(MI Sortabte Makes alist of items sortable 
£ Spec For hetp with your j@uery UI 

Wage. M Accordion Creates an accordion navigation widget. download, check out our Getting 


Gambar 2.1 Download jauery UI 


21 Aneka Trik Datepicker 


Datepicker merupakan salah satu teknik j@uery yang paling sering 
digunakan untuk pembuatan aplikasi. Apa sih datepicker?.. 
Datepicker itu merupakan sebuah pop-up kalender yang digunakan 
untuk menginputkan tanggal, bulan, dan tahun secara keseluruhan 
melalui sebuah textbox. Jadi, intinya bilamana textbox tersebut 
diarahkan, maka akan tampil pop-up kalender. Dan itu sangat 
membantu sekali bagi pengguna. 


911 Datepicker Standar 


Sebagai awal, coba bandingkan penggunaan tanggal menggunakan 
PHP dan juga penggunaan tanggal menggunakan bantuan sentuhan 
j@uery. 
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23 w November - 2011 v 


Januari 
Februari 
Maret 
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Juni 

Juli 
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Oktober 


Gambar 2.3 Tanggal menggunakan PHP dengan sentuhan j@uery 


Gimana terlihat ciamik bukan?.. Yukk kita cari tahu bagaimana sih 
bisa jadi seperti kalender seperti itu? 

LANGKAH PERTAMA 

Buat dokumen baru html yang isinya seperti berikut: 


Shtml» 
Shead» 

Ktitle» Datepicker 1 «/title» 
«/head» 


«body» 


«/body» 
«/html» 


LANGKAH KEDUA 


Kita menggunakan library j@uery, oleh sebab itu kita panggil file-file 
javascript yang dibutuhkan untuk pembuatan datepicker. Itu loh yang 
udah kita download (jAuery UI). Nah, tambahkan skrip yang tercetak 
tebal hingga menjadi skrip berikut: 


Shtml» 
Sheadb 
Ktitle» Datepicker 1 «/title» 
Slink rel-"stylesheet" href-"development- 


bundle/themes/base/jguery.ui.all.css" type-"text/css"» 
KSscript type-"text/javascript" src-"development-bundle/ jguery- 
1.6.2. js"» «/script» 


Sscript type-"text/javascript" src-"development- 
bundle/ui/jguery.ui.core.js" X/script» 

Sscript type-"text/javascript" src-"development- 
bundle/ui/jguery.ui.datepicker.js" X/script» 

Sscript type-"text/javascript" src-"development- 
bundle/ui/jguery.ui.widget. js" X/script» 
«/head» 
«body» 
«/body» 
«/html» 


LANGKAH KETIGA 


Selanjutnya kita buat skrip j@uery-nya. Perhatikan skrip yang 
tercetak tebal berikut: 


Shtml» 
Sheadb 

Ktitle» Datepicker 1 «/title» 

«link rel-"stylesheet" href-"development- 
bundle/themes/base/jguery.ui.all.css" type-"text/css"» 

Kscript type-"text/javascript" src-"development-bundle/ jguery- 
1.6.2.jJs"»«/script» 

Sscript type-"text/javascript" src-"development- 
bundle/ui/jguery.ui.core.js"»«/script? 

Sscript type-"text/javascript" src-"development- 
bundle/ui/jguery.ui.datepicker.js" »«/script» 

Sscript type-"text/javascript" src-"development- 
bundle/ui/ jguery.ui.widget. js" »«/script» 


Kscript type-"text/javascript"» 
$ (document) . ready (function () | 
$ ("#tanggal") .datepicker (): 
Hj: 
«/script» 
«/head» 
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«body» 


«/body» 
«/html» 


LANGKAH KEEMPAT 


Tambahkan skrip textbox berdasarkan id yang telah didefinisikan 
pada skrip yang tercetak tebal di atas (#tanggal).. sematkan di 
antara tag body, perhatikan skripnya: 


«body» 


Tanggal: Xinput id-"tanggal" type-"text" name-"tanggal"» 
«/body» 


Selesai sudah pembuatannya, untuk melihat hasilnya bisa Anda klik 
2x pada file dokumen html dan hasilnya akan terlihat seperti pada 
Gambar 2.4. 


aa ba 
| Li Datepicker1 krl z 
| " U) file:///D:/DatePickerl/datepicker-html 17 - @ | I- oP| | | 
Tanggal: | I 
K4 November 2011 o 
Su Mo Tu We Th Fr Sa | 
1 2 3 4 5 
6 TA 8 Ol. Old 12 
13/1415 161-4147-1819 
2011--211122 23 k24 251126 
27! 28! 29 30 | 


Gambar 2.4 Hasil skrip datepicker 


919 Datepicker yang Dinamis 


Kita dapat memanipulasi format datepicker secara dinamis loh.. 
tergantung kita ingin bagaimana formatnya. Caranya cukup ubah 
skrip jguery-nya menjadi seperti berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
S( "#datepicker" ).datepicker(): 
S( "#format" ).change (function () ( 
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S( "#datepicker" ).datepicker( "option", "dateFormat", S( 


this ).val() ): 
Hj: 

Hi 

«/script» 


Kemudian skrip antara tag body ubah menjadi skrip berikut: 


«body» 


Xp?Tanggal: Xinput type-"text" id-"datepicker" size-"30"/»x/p3 


Sp?»Pilih Format Tanggal: br /» 
Kselect id-"format"» 


Koption 
Koption 
Koption 
Koption 
Koption 
Koption 


value-"mm/dd/yy"»Default - mm/dd/yyX/option» 
value-"yy-mm-dd"5ISO 8601 - yy-mm-dax/option» 
value-"d M, y"»Short - da M, yx/option?» 

value-"d MM, y"»Medium - d MM, yx/option» 

value-"DD, d MM, yy"»Full - DD, d MM, yyX/option» 
value-"'day' d 'of' MM "in the year' yy"»wWith text 


- 'day' d 'of' MM 'in the year' yyx/option? 


«/select»x«/p» 
«/body» 


Hasilnya dapat Anda lihat pada Gambar 2.5. 


kesat santa 2 
|) Datepicker1 | #t | s 
IL) file///D:/Datepicker/datepicker2.html 17 -|G || - PI M 


Tanggal: Wednesday. 23 November, 2011 


Pilih Format Tangga: 
Full - DD, d MM. yy El 
Default - mm/dd/yy 

ISO 8601 - yy-mm-dd 

Short-d M.y 
Medium - d MM. 
Full- DD. d MM. yy 

With text- 'day' d'of' Ji 'Inthe year' yy 


Gambar 2.5 Hasil skrip datepicker dinamis 


913 Asyiknya DatePicker Range 


Datepicker juga dapat kita modifikasi sehingga tanggal tersebut 
dapat menampilkan 3 kalender sekaligus berdasarkan bulan secara 
berurutan sesuai dengan nama bulan yang kita pilih. Caranya 


sebagai berikut. 
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LANGKAH PERTAMA 
Ubah skrip j@uery pada file dokumen html menjadi seperti berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
var dates - S( "#from, #to" ) .datepicker (f 
defaultDate: "#1w", 
changeMonth: true, 
numberOfMonths: 3, 
onSelect: function( selectedDate ) ( 
var option - this.id — "from" ? "minDate" : "maxDate", 
instance - S( this ).data( "datepicker" ), 
date - $.datepicker.parseDate ( 


instance.settings.dateFormat | | 
$S.datepicker. defaults.dateFormat, 
selectedDate, instance.settings ): 


dates.not( this ).datepicker( "option", option, 
date 


«/script» 


LANGKAH KEDUA 
Pada tag body ubah menjadi skrip berikut: 
«body» 
From: Sinput type-"text" id-"from" name-"from"» 


to: KSinput type-"text" id-"to" name-"to"» 
«/ body» 


Hasil perubahan skrip dapat Anda lihat seperti pada Gambar 2.6. 


kes Ie bebe 
| O patepicker3 ll 5 
| 3 fite///0:/Datepicker/datepicker3.html sal - Google Pa 
From: to: 
0 Nov IM 2011 December 2011 January 2012 Je 
Jan 
Su Mrsb Th Fr Sa Su Mo Tu We Th Fr Sa Su Mo Tu We Th 
Mar 3alh.s isa. il.2-ahal.s 
6 Ss ok pssi koko) (sll kzol aa Mi2 
13| 43un 17|-1o|.10| |ar.42|-43|44-a5|e|a7| a50 47.451.109 
20: jJul 24|25i»20| jas 40ll.201)-21| 22-23||-2a| | 22.23) 20) 2526 
Pn tas 2511 20|/ 27 -2e|/2011301//31| (20 30|/31 
Sep 
Oct 
Dec 


Gambar 2.6 Hasil skrip datepicker range 


914 Datepicker Dropdown Bulan dan Tahun 


Pada Gambar 2.6 terlihat ada kolom dropdown. Nah, kita akan buat 
konsep datepicker seperti itu, hanya saja kondisinya bukan hanya 
bulan, melainkan tahun juga. 


LANGKAH PERTAMA 
Ubah skrip jaAuery menjadi skrip berikut: 


Kscript type-"text/javascript"» 
S (function () ( 

S( "#datepicker" ) .datepicker (( 
changeMonth: true, 
changeYear: true 

Hi 

Hi 
«/ script» 


LANGKAH KEDUA 
Ubah skrip pada tag body menjadi skrip berikut: 


Xp?Tanggal: Xinput type-"text" id-"datepicker"»«/p» 


Hasil perubahan skrip akan menampilkan datepicker seperti pada 


Gambar 2.7. 
wa 0 La 
Aa) Datepicker 3 krl - 
LJ file:///D:/Datepicker/datepicker4.html “ic 4- so? t 2 
Tanggal: 
@ Nov x|2011 r 0 
Jan h Ka 
Su Feb ve T Fr a 
Mar 21.3l--alh5 
3 md olo|ii2 
May 
13 I3un 16|.-47)-48||.19 
20 Jul 23 24125126 
27 Aug 30 
Sep 
Oct 
Dec 


Gambar 2.7 Hasil skrip datepicker dropdown bulan dan tahun 
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915 Datepicker Show Week 


Sesuai namanya “Show Week”, berarti tanggal yang berhari Minggu 
akan disorot oleh sesuatu sehingga kita bisa mengetahui mana yang 
hari Minggu atau bukan. Langkahnya sebagai berikut. 


Pada skrip j@uery, ubah skripnya menjadi seperti berikut: 


Kscript type-"text/javascript"» 
S (function () ( 
S( "#datepicker" ) .datepicker (( 
showweek: true, 
firstDay: 1 
Hi 
Hi 
«/ script» 


Cukup mudah bukan?.. Hasilnya bisa dilihat pada Gambar 2.8. 


| rotor ah 
| J Datepicker5 | 4 | 2 
LI) file:///D:/Datepicker/datepicker5.html “|iG| “1- Con SANG SNN «3 
Tanggal: 


ks) November 2011 o 


WK Mo Tu We Th Fr Sa Su 


st 1 210013 owl Di le 
45 Tilas 014014112143 
46 1415| 16/417/18| 1920 
47 211722| 23 12425j/261127 
18 28:29:30 


Gambar 2.8 Hasil skrip datepicker show week 


2.2 Accordion 


Salah satu unggulan j@uery adalah tersedianya Accordion. 
Accordion merupakan sebuah panel yang digunakan untuk 
mengelompokkan konten-konten berdasarkan grup yang sejenis. 
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991 Accordion Standar 


Sebagai langkah awal, penulis akan memberikan hal yang sangat 
sederhana dari indahnya alunan accordion. Secara step by step 
dapat Anda ikuti petunjuknya. 


LANGKAH PERTAMA 


Buat dokumen html baru dengan isi sebagai berikut: 


Shtml» 
Sheadb 
Ktitle?Accordion 1X/title» 
«/head» 
«body» 


«/body» 
«/html» 


LANGKAH KEDUA 


Panggil library javascript yang dibutuhkan, perhatikan skrip yang 
tercetak tebal: 


Shtml» 
Sheadb 
Ktitle»Accordion 1x/title» 
slink rel-"stylesheet" href-"development- 


bundle/themes/base/jguery.ui.all.css"» 
Kscript src-"development-bundle/jguery-1.6.2.js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui.core.js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui widget. js" X/script» 


Sscript src-"development-bundle/ui/jguery.ui.accordion.js"» 
«/seript» 

«/head» 

«body» 


«/body» 
«/ html» 


LANGKAH KETIGA 


Tambahkan skrip j@uery berikut di antara tag chead» dan «/head». 


Kscript type-"text/javascript"» 
S (function () ( 


S( "#accordion" ) .accordion (( 
collapsible: true 
Hi 
Hi 
«/ script» 


LANGKAH KEEMPAT 
Pada tag body, sisipkan skrip berikut: 


«body» 


«div id-"accordion"» 

«h3»xa href-"#"»ASFA GROUPX/a»«/h3» 

KPP3ASFA GROUP merupakan grup usaha yang dirintis pada bulan Agustus 
2011 diprakarsai oleh Agus Saputra.«/p» 

«h3»xa href-"#"»asfa Solution«/a»x/h3» 

Xp?Asfa Solution merupakan anak usaha dari ASFA GROUP yang bergerak 
dalam bidang Web Solution, Best Solution For Your Business. berdiri 
pada bulan Agustus 2011. Jasa pembuat web yang saat ini sedang 
merintis karir.«/p» 

Kh3pxa href-"#"sAsfamedias/a»x«/h3» 

Xp?Asfamedia merupakan perencanaan usaha yang akan segera meluncur 
setelah Asfa Solution, Asfamedia akan bergerak pada bidang 
Penerbitan.«/p» 

«/div» 


«/body» 


Hasil skrip di atas akan menghasilkan teknik accordion seperti pada 
Gambar 2.9. 
| Tretor | 


| Di Accordion1 kl 


LL file:///D:/Datepicker/accordionl.html 


» ASFA GROUP 


" Asfa Solution Ay 


Asfa Solution merupakan anak usaha dari ASFA GROUP yang 

' bergerak dalam bidang Web Solution, Best Solution For Your 
Business. berdiri pada bulan Agustus 2011. Jasa pembuat web 

yang saat ini sedang merintis karir. 


» Asfamedia 


Gambar 2.9 Hasil skrip accordion 
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999 Accordion Sortable 


Accordion ini bisa dibilang sangat istimewa, karena setiap masing- 
masing group dapat kita drag & drop sesuai dengan kebutuhan. 
Istilah ini bisa dikatakan sebagai “Sortable”. Untuk membuat 
accordion macam ini, setidaknya berikut langkah yang dapat 
diambil. 


LANGKAH PERTAMA 


Tambahkan pemanggilan library javascript sesuai dengan skrip yang 
tercetak tebal berikut: 


«link rel-"stylesheet" href-"development- 
bundle/themes/base/jguery.ui.all.css"» 

«script src-"development-bundle/jguery-1.6.2.js"»«/script» 

«script src-"development-bundle/ui/jguery.ui.core.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.widget. js" »«/script» 
Kscript src-"development- 
bundle/ui/jguery.ui.accordion. js"»«/script? 

Kscript src-"development-bundle/ui/jguery.ui.mouse. js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui.sortable.js"X/script» 


LANGKAH KEDUA 
Ubah skrip j@uery menjadi seperti berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
var stop - false, 
S( "#accordion h3" ).click(function ( event ) ( 
if (stop ) ( 
event.stopImmediatePropagation (): 
event.preventDefault (): 
stop - false: 
) 
Hj 
S( "#accordion" ) 
.accordion (( 
header: "» div » h3" 
) 
.sortable (( 
ana "gt 
handle: "h3", 
stop: function () ( 
stop - true, 


«/script» 
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LANGKAH KETIGA 


Ubah skrip pada tag body (isi) menjadi skrip dan konten berikut: 


«body» 


«div id-"accordion"» 


«div» 
«h3»«a href-" 
«div» 
KpPASFA 
bulan Agustus 201 
«/divb 
«/divs 
«div» 
«h3»«a href-" 
«div? 
KppAsfa 
yang bergerak da 
Business. 


lam bidang Web Solution, 
berdiri pada bulan Agustus 2011. 


"SASFA GROUPX/a»«/h3» 


GROUP merupakan grup usaha yang dirintis pada 
diprakarsai oleh Agus Saputra.«/p» 


"SAsfa Solution«/arx«/h3» 


Solution merupakan anak usaha dari ASFA GROUP 
Best Solution For Your 
Jasa pembuat web yang 


saat ini sedang merintis karir.«/p» 


«/divb 
«/divs 
«div» 


Kh3pKa href-"#"»aAsfamediax/a»«/h3» 


«div» 


Kp»Asfamedia merupakan perencanaan usaha yang akan segera 


meluncur setelah Asfa Solution, 


Penerbitan.«/p» 
«/divb 
«/divs 
«/divb 
«/body» 


Asfamedia akan bergerak pada bidang 


Hasilnya dapat Anda lihat pada Gambar 2.10. 


(aretor | ola 
| Di Accordion 2 klo 5. "3 - 
DO fle:///D:/Datepicker/accordion2.html "|a g- ogle | || | 
» Asfa Solution | drag dan geser ke 
” ASFA Pi bawah 
ASFA GROUP merupakan grup usaha yang dirintis pada bulan 
1 Agustus 2011 diprakarsai oleh Agus Saputra. | 


» Asfamedia 


file:///D:/Datepicker/accordion2.htmlt | 


Gambar 2.10 Hasil skrip accordion sortable 
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2.3 Kotak Dialog (Dialog Box) 


Kotak dialog, kita pasti pernah mendengar dan melihat bentuknya. 
Itu loh yang suka menampilkan alert menggunakan javascript?.. Nah, 
agar lebih keren, kotak j@uery Ul telah meyediakan library tersebut. 
Keunggulannya tentu saja lebih terlihat keren dan atraktif, di samping 
itu bisa dimodifikasi juga dengan cara diberikan effect dan simbol- 
simbol gambar. 


931 Kotak Dialog dengan Efek Explode 


Berbentuk kotak dialog, hasil explode tersebut akan didapatkan 
ketika kita menutup kotak dialog tersebut. Berikut langkah atau cara 
yang dapat kita ambil. 


LANGKAH PERTAMA 


Buat dokumen html dengan isi sebagai berikut: 


Shtml» 
Sheadb 

«title» Dialog «/title» 
«/head» 


«body» 


«/body» 
«/html» 


LANGKAH KEDUA 


Panggil library javascript dan css yang dibutuhkan, perhatikan skrip 
yang tercetak tebal berikut: 


Shtml» 
Sheadb 
Ktitle» Dialog «/title» 
«link rel-"stylesheet" href-"development- 


bundle/themes/base/jguery.ui.all.css"» 
Kscript src-"development-bundle/jguery-1.6.2.js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui.core.js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui widget. js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui mouse. js" X/script» 
Sscript src-"development- 
bundle/ui/jguery.ui.draggable. js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui.position. js" X/script» 
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Sscript src-"development- 
bundle/ui/jguery.ui.resizable. js" X/script» 

Kscript src-"development-bundle/ui/jguery.ui.dialog.js" X/script» 
Sscript src-"development- 
bundle/ui/jguery.effects.core. js" X/script» 

KSscript src-"development-bundle/ui/jguery.effects.blind.js"» 
«/script» 

KSscript src-"development-bundle/ui/jguery.effects.explode.js"» 
«/script» 

«/head» 


«body» 


«/body2 
«/html» 


LANGKAH KETIGA 


Buat skrip j@uery untuk mendefinisikan kotak dialog yang akan 
dibuat. 


Kscript type-"text/javascript"» 
S.fx.speeds. default - 1000: 
S (function () ( 

S( "#dialog" ).dialog (f 
autoOpen: false, 
show: "blind", 
hide: "explode" 

Hi: 


$S( "#opener" ).click (function () ( 
S( "#dialog" ).dialog( "open" ): 
return false: 
Hi: 
Hi 
«/script» 


LANGKAH KEEMPAT 


Pada tag body, tambahkan konten, namun tetap memerhatikan id 
yang telah didefinisikan pada skrip jAuery. Berikut skripnya: 


«body» 

«div id-"dialog" title-"Informasi"» 

Sp?Nantikan buku terbaru penulis mengenai "Trik Dahsyat Web Master 
PHP plus HTML5 & CSS3".. ada Bonus Proyek bernilai Jutaan Rupiah, 
Full Sentuhan jOuery.«/p» 

«/div2 

Sbutton id-"opener"»Open Dialog«/button» 


«/body» 
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Hasil skrip di atas akan menghasilkan tampilan kotak dialog dengan 
effects explode (bila di-close) seperti pada Gambar 2.11. 


"Firefox y | mma er 
| Di oiatog la! 
| ) file:///D:/Source Code/dialogl.html 7 - |(@ || - 62 a:- | 
| (open Diaiog, | 
| 
Informasi x 


Nantikan buku terbaru 
penulis mengenai "Trik 
Dahsyat Web Master PHP 
plus HTML5S & CSS3".. ada 
Bonus Proyek bernilai Jutaan 
Rupiah, Full Sentuhan 
jOuery. 

4 


Gambar 2.11 Hasil skrip kotak dialog (dialog box) 


939 Menentukan Posisi Kotak Dialog 


Secara default, kotak dialog tersebut akan tampil pada sisi-sisi 
tengah. Dengan j@Auery kita dapat mengatur posisinya, apakah kita 
ingin agar kotak tersebut ditampilkan pada sisi kiri, sisi kanan, sisi 
kanan atas, dan sebagainya. Sebagai contoh, kita ambil agar kotak 
dialog tersebut ditampilkan pada posisi kiri sebelah bawah. Maka 
cukup kita tambahkan saja skrip j@uerynya. Perhatikan, skrip yang 
tercetak tebal berikut: 


Kscript type-"text/javascript"» 
$S.fx.speeds. default - 1000: 
S (function () ( 
S( "#dialog" ) dialog (( 
autoOpen: false, 
show: "blind", 
hide: "explode", 
position: ("left", "bottom") 
Hi: 


$S( "#opener" ).click (function () ( 
S( "#dialog" ).dialog( "open" ): 
return false, 


Hi: 
«/script» 


24 


Sekarang coba lihat perbedaannya pada Gambar 2.12. 


| LJ Dialog | t | F4 
LL file:///D:/Source Code/dialog2.html “lali Google P t a- 
Open Dialog | 
| 1 
Informasi x 


Nantikan buku terbaru 
penulis mengenai "Trik 
Dahsyat Web Master PHP 
plus HTMLS & CSS3".. ada | 
Bonus Proyek bernilai Jutaan 
Rupiah, Full Sentuhan 
j@uery. 
4 


Gambar 2.12 Hasil skrip kotak dialog dalam menentukan posisi 


24 Bounce 


Bounce jika diartikan memiliki arti memantul, yaitu suatu efek seperti 
layaknya bola basket yang sedang di-drible. Untuk menggunakan 
efek tersebut, ikuti langkah berikut. 


LANGKAH PERTAMA 
Siapkan dokumen html dan beri nama, misalnya bounce.html yang 


isinya seperti berikut: 


«html» 
Shead» 

Ktitle»Bounces/title» 
«/head» 


«body» 


«/body» 
«/html» 
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LANGKAH KEDUA 


Panggil library javascript yang dibutuhkan, tambahkan sesuai dengan 
skrip yang tercetak tebal berikut: 


Shtml» 
Sheadb 
Ktitle»Bouncex/title» 
Kscript type-"text/javascript" src-"development-bundle/ jguery- 
1.6.2. js" X/script» 
Kscript src-"development-bundle/ui/jguery.effects.core.js"» 
«/seript» 
Kscript src-"development-bundle/ui/jguery.effects .bounce.js"» 
«/seript» 
«/head» 


«body» 


«/body2 
«/ html» 


LANGKAH KETIGA 
Tambahkan skrip jAuery berikut: 


«script type-"text/javascript"» 

S (document) . ready (function () ( 
S(".bounce") .click (function () ( 

S("#logol") .effect ("bounce", ( 
distance: 350, 

direction: 'right' 

Hi 
Hi: 

Hi 

«/ script» 


LANGKAH KEEMPAT 


Tambahkan isi konten pada tag body, perhatikan setiap id dan class 
yang telah didefinisikan pada skrip j@uery di atas. 


«body» 


Sbutton class-"bounce"» Bounce «/button» 
Kprtimg src-"asfa solution.jpg" id-"logol" X/p» 


«/body» 
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Silakan Anda lihat hasilnya dengan cara klik 2x pada file html Anda 
kemudian klik tombol “Bounce”, maka gambar yang tertampil pada 
halaman web akan memantul dengan sendirinya. Lihat Gambar 2.13. 


Pn Firef an | 1 si it Sa 
|) Bounce & | E 


£ BL) file:///D:/Source Code/bounce.html “ali PI | Ia: 
CO IL uti ojeN — | 
Best $0 


Memantul 


lution For Your Business 


Gambar 2.13 Hasil skrip bounce 


25 Explode 


Explode merupakan salah satu efek yang dimiliki j@uery Ul. Efek 
tersebut dapat dilukiskan dari sebuah gambar yang tiba-tiba pecah 
ke berbagai arah layaknya sebuah bom yang meledak, mudah bukan 
kalo digambarkan?.. 


Nah, sekarang bagaimana cara penerapannya? Jika mengikuti 
langkah-langkah berikut pasti akan sangat mudah. 
LANGKAH PERTAMA 


Ubah pemanggilan library pada pembahasan Subbab 2.4 yang 
semula: 


«script src-"development-bundle/ui/jguery.effects.bounce.js"» 
«/ script» 

Menjadi: 

«script src-"development-bundle/ui/jguery.effects.explode. js" » 
«/script» 
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LANGKAH KEDUA 
Ubah skrip jAuery yang semula: 


«script type-"text/javascript"» 
S (document) .ready (function () ( 
S(".bounce”) .click (function () ( 
S("#logol") .effect ("bounce", ( 
distance: 350, 
direction: 'right' 
Hi 
Hi 
Hi 
«/ script» 


Menjadi: 
Kscript type-"text/javascript"» 
$ (document) .ready (function () | 
S(".explode") .click (function () ( 
S("#logol") .effect ("explode") : 
Hi 


Hi 
«/ script» 


LANGKAH KETIGA 
Pada tag body konten, ubah skripnya menjadi seperti berikut: 


«body» 


Xbutton class-"explode"» Explode «/button» 
Kprimg src-"asfa solution.jpg" id-"logol" X/p» 


«/body» 


Hasil skrip di atas akan terlihat seperti pada Gambar 2.14. 
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ke 3 
4 LJ Explode | t | x 
LJ file:///D:/Source Code/explode.html 2 "3 "6GP || |: 


| Beploge 


Me au Aa 


Gambar 2.14 Hasil skrip explode 


2.6 Asyiknya Berkreasi dengan Menu Tab 


Tabs memiliki fungsi yang hampir sama dengan accordion, yaitu 
berfungsi untuk memasukkan banyak konten ke dalam suatu grup. 
Hanya saja grup ini akan ditampilkan dalam bentuk tab sehingga jika 
ingin beralih konten, kita cukup klik tab yang ingin dituju. 


961 Tabs Standar 


Sebagai langkah awal mengenal menu tabs, kita akan mulai dari hal 
yang paling sederhana. Ikuti langkah berikut. 


LANGKAH PERTAMA 


Buat dokumen html yang isinya seperti berikut: 


Shtml» 
Sheadb 
Ktitle»Tabs«/title» 
«/headb 
«body» 


«/body» 
«/html» 
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LANGKAH KEDUA 


Panggil file library javascript yang diperlukan. Perhatikan skrip yang 
tercetak tebal berikut: 


Shtml» 
Sheadb 
Ktitle»Tabs«/title» 
«link rel-"stylesheet" href-"development- 


bundle/themes/base/jguery.ui.all.css"» 
Kscript src-"development-bundle/jguery-1.6.2.js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui.core.js" X/script» 
Kscript src-"development-bundle/ui/jguery.ui widget. js"» 
«/script» 
Kscript src-"development-bundle/ui/jguery.ui.tabs.js" X/script» 
«/head» 


«body» 


«/body» 

«/html» 

LANGKAH KETIGA 

Buat skrip jAuery seperti berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
S( "#tabs" ).tabs(): 
Hi 
«/script» 


LANGKAH KEEMPAT 


Tuliskan skrip pada tag body, isinya seperti yang terlihat pada 
Gambar 2.15. 
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Cbodyz 


€div id-"tabs"» 
culz 


€li?Xa href 
Climxa href- 
€li?xta href- 
c/ulz 


cdi 
Sp”ASFA GROUP merupakan grup usaha yang dirintis pada 
bulan Agustus 2011 diprakarsai oleh Agus Saputra.«/p”r 


c/adi 
casuk3a-ntapa-2"3) 
€p”Asfa Solution merupakan anak usaha dari ASF. GROUP yang 
bergerak dalam bidang Web Solution, Best Solution For Your 
Business. berdiri pada bulan Agustus 2011. Jasa pembuat web yang 
saat ini sedang merintis karir.«/pr 


c/a 


i 
cdi (ia-"tabs-3"7) 
Tp”Asfanedia merupakan perencanaan usaha yang akan segera 


meluncur setelah Asfa Solution, Asfamedia akan bergerak pada 
bidang Penerbitan.«/pr 

c/div? 
€c/divr 


ftabs-1'-ASFA GROUP«/arc/lir 
ftabs-2'/»Asfa Solution«/ars/lir 
ftabs-3!/-Asfamedias/ar«/lir 


€«/bodyz 


Gambar 2.15 Skrip Tabs Standar 


Hasil skrip di atas akan menghasilkan menu tab seperti gambar ini. 
ai Xx) 
L) Tabs | - "4 


Ga |) file//D1/Source Code/tabsi.htmi A - el RE Pa: 


| 
ASFA GROUP | Asfa Solution | Asfamedia | 


Asfa Solution merupakan anak usaha dari ASFA | 
GROUP yang bergerak dalam bidang Web | | 
Solution, Best Solution For Your Business. 

berdiri pada bulan Agustus 2011. Jasa pembuat | 
web yang saat ini sedang merintis karir. 


Gambar 2.16 Hasil Skrip Tabs Standar 
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96.9 Menentukan Posisi Menu Tabs 


Secara umum, menu tab berada paling atas dari sebuah kolom, 
contohnya dapat Anda lihat pada Gambar 2.17. 


lksdoenat 0.3 wa 
Tabs ll at 


file:///D:/Source Code/tabsl html “ic 3 ? £- 


ASFA GROUP Asfa Solution Asfamedia 


Asfa Solution merupakan anak usaha dari ASFA 
GROUP yang bergerak dalam bidang Web 
Solution, Best Solution For Your Business. 
berdiri pada bulan Agustus 2011. Jasa pembuat 
web yang saat ini sedang merintis karir. 

Lg 


Gambar 2.17 Tampilan tabs secara umum 


Nah, pada kondisi tertentu, sesuai dengan tipografi web, terkadang 
ada yang lebih cocok dengan kondisi menu diletakkan pada bagian 
paling bawah. Langkah yang dapat diambil sebagai berikut. 


LANGKAH PERTAMA 
Ubah skrip j@uery berikut serta tambahkan skrip css berikut: 


Kscript type-"text/javascript"» 
S (function () ( 
S( "#tabs" ).tabs (): 
S( ".tabs-bottom .ui-tabs-nav, .tabs-bottom .ui-tabs-nav » “" 
) 
.removeClass( "ui-corner-all ui-corner-top" ) 
.addClass( "ui-corner-bottom" ): 
Ini 
«/script» 


Kstyle type-"text/css"» 
tabs (| 
height: 200px, 


.tabs-bottom (| 
position: relative, 


.tabs-bottom .ui-tabs-panel ( 
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height: 140px, 
overflow: auto, 

) 

.tabs-bottom .ui-tabs-nav (| 
position: absolute !'important: 
left: 0j 
bottom: 0: 
right:0: 
padding: 0 0.2em 0.2em 0: 

) 

.tabs-bottom .ui-tabs-nav li ( 
margin-top: -2px !important, 
margin-bottom: 1lpx !'important, 
border-top: none: 
border-bottom-width: 1pxj: 

) 

.Ui-tabs-selected ( 
margin-top: -3px !important, 

) 

«/style» 


LANGKAH KEDUA 
Pada bagian tag body, tambahkan sedikit skrip. 


Semula: 
«div id-"tabs"» 
Ubah menjadi: 


«div id-"tabs" class-"tabs-bottom"» 


Jika Anda melakukan refresh pada file html-nya, maka posisi tab 
akan berubah, lihat pada Gambar 2.18. 


(Firefox | “3 2 an 


| 


Tabs - " 


LJ file:///D:/Source Code/tabs2.html 


Asfamedia merupakan perencanaan usaha yang 
akan segera meluncur setelah Asfa Solution, 
Asfamedia akan bergerak pada bidang 
Penerbitan. 


ASFA GROUP Asfa Solution Asfamedia 


Gambar 2.18 Hasil skrip menentukan posisi tabs 
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96.3 Tabs dengan Efek Mouseover 


Mouseover dapat diartikan ketika kursor mouse diarahkan ke menu 
tab, maka secara otomatis tab akan menampilkan konten sesuai 
dengan tab yang diarahkan. Jadi, ga perlu diklik lagi.. bahasa 
gaulnya kurang lebih seperti itu.. & 


Butuh sentuhan sedikit saja agar efek mousever dapat aktif, yaitu 
dengan cara mengubah sedikit skrip j@uery-nya. Perhatikan skrip 
berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
S( "#tabs" ).tabs(( 
event: "mouseover" 
Hi 
Hi 
«/script» 


Maka hasilnya dapat Anda lihat sendiri pada web browser Anda. 
Lihat Gambar 2.19. 

Drirefox "| KN —l iba 

Am) Tabs kl 


LJ  file:///D:/Source Code/tabs3.html 2 tag "9- GP || 


2 
ASFA GROUP Asfa solution) Asfamedia | 
Sp kursor berubah 


Asfa Solution merupakan anak usaha dari ASFA 
GROUP yang bergerak dalam bidang Web 
Solution, Best Solution For Your Business. 
berdiri pada bulan Agustus 2011. Jasa pembuat 
web yang saat ini sedang merintis karir. 


file:///D:/Source Code/tabs3.html#tabs-2 


Gambar 2.19 Tabs dengan efek mouseover 


964 Tabs Sortable 
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Kali ini kita akan membuat agar menu tabs tersebut dapat digeser- 
geser atau istilah komputernya, yaitu Drag & Drop sesuai dengan 
selera kita, maka kita perlu melakukan perombakan skrip. 


LANGKAH PERTAMA 


Tambah pemanggilan library javascript yang dibutuhkan, perhatikan 
skrip yang tercetak tebal berikut: 


«link rel-"stylesheet" href-"development- 
bundle/themes/base/jguery.ui.all.css"» 

«script src-"development-bundle/jguery-1.6.2.js"»«/script» 

«script src-"development-bundle/ui/jguery.ui.core.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.widget. js" »«/script» 
Kscript src-"development-bundle/ui/jguery.ui mouse. js" X/script» 
Sscript src-"development-bundle/ui/jguery.ui.sortable.js"» 
«/script» 

«script src-"development-bundle/ui/jguery.ui.tabs.js"»«/script» 


LANGKAH KEDUA 
Ubah skrip jaAuery menjadi skrip berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
S( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable(f( axis: 
"x" Hi 
Hi 
«/ script» 


Hasil skrip dapat Anda lihat pada Gambar 2.20. 


"Firefox v L —a (SN 
| Tabs kl Ie oo £ 
LJ file:///D:/Source Code/tabs4.html “ic “9- 52 t e- | 
ASFA GROUP 


Asfamedia Asfa $ 


Menu Tab yang sedang di sort 
ASFA GROUP merupakan grup usaha yang 
dirintis pada bulan Agustus 2011 diprakarsai 
oleh Agus Saputra. 


Gambar 2.20 Tabs dengan efek sortable 
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96.5 Manipulasi Tabs 


Ini mungkin yang bisa dibilang unik. Karena kita bisa juga mengatur 
maupun memanipulasi seperti menambah menu tab maupun 
menghapus sesuai dengan kebutuhan. Secara keseluruhan pem- 
buatan jenis menu tab ini lumayan membuat gigi kita keriting. 
Gimana enggak».. Seabreg skrip disematkan dalam file. Jika kita 
lihat, berikut keseluruhan skrip yang dibuat. 


Shtml» 
Sheadb 
Ktitle»Tabs«/title» 
«link rel-"stylesheet" href-"development- 
bundle/themes/base/jguery.ui.all.css"» 
«script src-"development-bundle/jguery-1.6.2.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.position.js"» 
«/script» 
«script src-"development-bundle/ui/jguery.ui.core.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.widget.js"» 
«/script» 
«script src-"development-bundle/ui/jguery.ui.button.js"» 
«/script» 
«script src-"development-bundle/ui/jguery.ui.tabs.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.dialog.js"» 
«/script» 
Kstyle type-"text/css"» 
dialog label, #dialog input 


display:block: 


dialog label ( 
margin-top: 0.5em: 


dialog input, #dialog textarea ( 
width: 9584: 


tabs ( 
margin-top: lem: 


tabs li .ui-icon-close ( 
float: left, 
margin: 0.4em 0.2em 0 0: 
cursor: pointer, 


add tab ( 
cursor: pointer: 


«/style» 


Kscript» 

S (function () ( 
var Stab title input - $S( "#tab title"), 
Stab content input - $( "#tab content" ), 
var tab counter - 2: 
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// tabs init with a custom tab template and an "add" 
callback filling in the content 
var Stabs - $( "#tabs").tabs (( 
tabTemplate: "xlirxa href-'#f(href)'»#f(labeljx/a» «span 
class-'ui-icon ui-icon-close'»Remove Tabx«/span?X«/li?", 
add: function( event, ui ) ( 
var tab content - Stab content input.val() || "Tab 
"4 tab counter t " content."j 
$S( ui.panel ).append( "«p»" #t tab content #t "«/p»" 
yi 
) 
Hi 


// modal dialog init: custom buttons and a "close" callback 
reseting the form inside 
var Sdialog - S( "#dialog" ).dialog(f 
autoOpen: false, 
modal: true, 
buttons: ( 
Add: function () ( 
addTab () : 
S( this ).dialog( "close" ): 
Ex 
Cancel: function () ( 
S( this ).dialog( "close" ): 
) 


Ad 
open: function () ( 
Stab title input.focus (): 
, 
Close: function() ( 
Sform( 0 J.reset(): 


Hi 


// addTab form: calls addTab function on submit and closes 
the dialog 
var Sform — S( "form", Sdialog ).submit (function () ( 
addTab (): 
Sdialog.dialog( "close" ): 
return false: 
Hi 


// actual addTab function: adds new tab using the title 
input from the form above 
function addTab () ( 
var tab title - Stab title input.val() I| "Tab " 4 
tab counter: 
Stabs.tabs( "add", "#tabs-" #t tab counter, tab title ), 
tab countertt, 
) 


// addTab button: just opens the dialog 
S( "#add tab" ) 
.button () 
.click (function () ( 
Sdialog.dialog( "open" ): 
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Hi 


// close icon: removing the tab on click 
// note: closable tabs gonna be an option in the future - 
see http://dev.jgueryui.com/ticket/3924 
S( "#tabs span.ui-icon-close" ).live( "click", function () ( 
var index — S( "li", Stabs ).index( S( this ).parent() ): 
Stabs.tabs( "remove", index )j 
Hi 
Hi 
«/ script» 


«/headb 
«body» 


«div id-"dialog" title-"Tab data"» 
Sform 

KSfieldset class-"ui-helper-reset"» 

«label for-"tab title"»Titlex«/label» 

Kinput type-"text" name-"tab title" id-"tab title" value-"" 
class-"ui-widget-content ui-corner-all" /» 

«label for-"tab content"»Content«/label» 

Stextarea name-"tab content" id-"tab content" class-"ui- 
widget-content ui-corner-all"»x«/textarea» 

«/fieldset» 

«/ form 
«/div» 


Xbutton id-"add tab"»Add Tabx«/button» 


«div id-"tabs"» 
Kul? 
Kli»Ka href-"#tabs-1"»ASFA GROUPX/a» «span class-"ui-icon 
ui-icon-close"»Remove Tab«/span»«/lir 
«/ul3 
«div id-"tabs-1"» 
KP3ASFA GROUP merupakan grup usaha yang dirintis pada bulan 
Agustus 2011 diprakarsai oleh Agus Saputra.«/p» 
«/div» 
«/div2 


«/body» 
«/html» 


Hasil skrip di atas akan menampilkan tampilan tabs seperti pada 
Gambar 2.21. 
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(eror Lo asasi 


| Tabs 4) ne, — 3 . 
Ie, LL) file:///D:/Source Code/tabs5.html "Ic |. - Google P t . 
Add Tab 
— 
Tab data x | 
ASFA GROUP 
Title 
tombol hapus Asfa Solution 
ASFA GROUP mel content lada bulan 


Agustus 2011 dip Asfa Solution 2 


merupakan anak usaha - 
dari ASFA GROUP vana 


| Add Cancel 


Gambar 2.21 Hasil skrip manipulasi tabs 


96.6 Tabs secara Vertikal 


Menu tabs juga dapat kita atur posisinya secara vertikal, itu jikalau 
kita bosan dengan posisi horizontal. Caranya dengan membuat 
dokumen html dengan isi sebagai berikut: 


Shtml» 
Sheadb 
Ktitle?Tabs«/title» 
«link rel-"stylesheet" href-"development- 


bundle/themes/base/jguery.ui.all.css"» 
«script src-"development-bundle/jguery-1.6.2.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.core.js"»«/script» 
«script src-"development-bundle/ui/jguery.ui.widget.js"» 
«/script» 
«script src-"development-bundle/ui/jguery.ui.tabs.js"»«/script» 
Kscript type-"text/javascript"» 
S(function() ( 
S( "#tabs" ).tabs().addClass( "ui-tabs-vertical ui-helper- 
clearfix" ): 
S( "#tabs li" ).removeClass( "ui-corner-top" ).addClass ( 
"ui-corner-left" ): 
Hi: 
«/script» 
Kstyle type-"text/css"» 
.Ui-tabs-vertical ( 
width: 55em: 
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) 

.Ui-tabs-vertical .ui-tabs-nav ( 
padding: .2em .lem .2em .2em: 
float: left, 
width: 12em, 

) 

.Ui-tabs-vertical .ui-tabs-nav li ( 
clear: left, 
width: 1008: 
border-bottom-width: 1lpx !important: 
border-right-width: 0 !important: 
margin: 0 -1lpx .2em 0: 

) 

.Ui-tabs-vertical .ui-tabs-nav li a ( 
display:block: 

) 

.Ui-tabs-vertical .ui-tabs-nav li.ui-tabs-selected (| 
padding-bottom: 0: 
padding-right: .lem: 
border-right-width: 1px, 
border-right-width: 1px, 


) 
.Ui-tabs-vertical .ui-tabs-panel ( 
padding: lem: 
float: right: 
width: 40em: 
) 
«/style» 
«/head» 
«body» 


«div id-"tabs"» 


Sul2 
Kli»Ka href-"#tabs-1"»ASFA GROUPX/ar«/li» 
Kli»rKa href-"#tabs-2"»Asfa Solution«/a?»«/li? 
KlirKa href-"#tabs-3"»Asfamediax/a»x/li? 
«/ul» 


«div id-"tabs-1"» 

KP3ASFA GROUP merupakan grup usaha yang dirintis pada bulan 

Agustus 2011 diprakarsai oleh Agus Saputra.«/p» 
«/div2 
«div id-"tabs-2"» 

KXp?Asfa Solution merupakan anak usaha dari ASFA GROUP yang 
bergerak dalam bidang Web Solution, Best Solution For Your 
Business. berdiri pada bulan Agustus 2011. Jasa pembuat web yang 
saat ini sedang merintis karir.«/p» 

«/divs 
«div id-"tabs-3"» 

Kp?Asfamedia merupakan perencanaan usaha yang akan segera 
meluncur setelah Asfa Solution, Asfamedia akan bergerak pada bidang 
Penerbitan.«/p» 

«/div2 
«/div2 


«/body» 
«/ html» 
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Hasil skrip tersebut akan menghasilkan tampilan tabs seperti pada 
Gambar 2.22. 


Han ba ae 


Tabs kl 


file:///D:/Source Code/tabs6.html -|aI3g- Google ola: 


ASFA GROUP 
Asfa Solution merupakan anak usaha dari ASFA GROUP yang bergerak dalam 
Asfa Solution bidang Web Solution, Best Solution For Your Business. berdiri pada bulan 
k Agustus 2011. Jasa pembuat web yang saat ini sedang merintis karir. 
Asfamedia 


Gambar 2.22 Hasil skrip tabs vertikal 


27 Tooltip 


Tooltip pada j@uery itu merupakan suatu keterangan ataupun info 
yang tampil untuk menjelaskan sesuatu terhadap link. Wah.. bingung 
deh ..jadi penulis kasih contoh seperti gini aja dah.. pada suatu 
blog/web profil/e-commerce pasti ada donk beberapa gambar dan 
bilamana kursor mouse kita arahkan ke gambar tersebut, maka pada 
gambar tersebut akan menampilkan sedikit keterangan atau info. 
Nah, itu dia yang disebut tooltip. 


971 Tooltip Standar 


Nah, sekarang kita akan membuat studi kasus seperti itu. Ikuti 
langkah berikut yah.. 


LANGKAH PERTAMA 


Siapkan terlebih dahulu sebuah gambar (bisa Anda buat dengan 
menggunakan Adobe Photoshop, Fireworks, dan lain-lain). Gambar 
ini akan digunakan sebagai frame dari tulisan tooltip tersebut, contoh 
gambarnya bisa Anda lihat pada Gambar 2.23. 
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Gambar 2.23 Frame 


LANGKAH KEDUA 


Buat file css dengan nama tooltip1.css yang isinya sebagai berikut: 


#demotip ( 
display:none, 


background:transparent url (img/black arrow.png): 


font-size:12px, 
height :70px, 
width:160px, 
padding:25px: 
color:#fff, 

) 


#demo img ( 
border:0: 
cursor:pointer, 
margin:0 8pxj 


) 


body ( 

padding:150px 50px, 

font-family: "Lucida Grande", "Lucida 
Unicode", "bitstream vera sans","trebuchet ms",verdana: 


a:active (| 
outline:none, 


:focus ( 
-moZ-outline-style:none, 


LANGKAH KETIGA 
Buat dokumen html yang awal skripnya seperti berikut: 


«html» 
Sheadb 

«title?Tooltip«/title» 
«/ head» 
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Sans 


«body» 


«/body» 
«/ html» 


LANGKAH KEEMPAT 


Panggil file css dan javascript, perhatikan pada skrip yang tercetak 
tebal. 


Shtml» 
Sheadb 
Stitle?Tooltip«/title» 
Klink rel-"stylesheet" href-"css/tooltipl.css" type-"text/css"» 
Sscript type-"text/javascript" 
src-"jguery.tools.min. js" X/script» 
«/head» 


«body» 


«/body2 
«/html» 


LANGKAH KELIMA 
Buat skrip jAuery berikut: 


Shtml» 
Sheadb 
Ktitle?Tooltip«/title» 
dlink rel-"stylesheet" href-"css/tooltipl.css" type-"text/css"» 
«script type-"text/javascript" 
src-"jguery.tools.min.js"»«/script? 
Kscript type-"text/javascript"» 
$ (document) . ready (function () | 
$ ("#demo img(title)") .tooltip('#demotip'): 
Hj: 
«/script» 
«/head» 


«body» 


«/body2 
«/html» 


LANGKAH KEENAM 
Tambahkan skrip konten berikut ke dalam tag body. 
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Sbody» 


Kdiv style-"position: absolute: top: 38px: left: 237px, display: 
none," id-"demotip"X/div» 


«div id-"demo"» 

Simg src-"asfamedia.jpg" title-"Asfamedia adalah usaha yang 
bergerak dalam bidang penerbitan"» 

Simg src-"asfa solution.jpg" title-"Asfa Solution adalah usaha yang 
bergerak dalam bidang web solution"» 

«/ div» 


«/body» 


Hasil skrip di atas akan menampilkan tooltip seperti Gambar 2.24. 


| D Tooltip | it | —ima 
$ LJ file:///D:/Source Code/tooltipl.html | CI IS | " GP t Ra 


Asfa Solution adalah usaha 
yang bergerak dalam 
bidang web solution 


ho PAT 
media. M SOIUtIONe, 


Gambar 2.24 Hasil skrip tooltip 


912 Tooltip Form 


Jika pada sub-subbab 2.7.1 kita mengambil studi kasus pada 
gambar, maka kali ini kita akan mengambil studi kasus untuk 
menata ruang form agar lebih menawan. 
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LANGKAH PERTAMA 


Buat file css dengan nama tooltip2.css yang isinya seperti berikut: 


div.tooltip (| 


#myform 


#myform 


#inputs 


inputs 


inputs 


body (£ 


) 


background-color:#000: 
border:lpx solid #fff, 
padding:10px 15pxj 
width:200px, 
display:none: 
color:#fff, 
text-align:left, 
font-size:12px, 


-moz-box-shadow:0 0 10px #000: 
-webkit-box-shadow:0 0 10px #000: 


i 

border:lpx outset #cccj: 

background:#fff url (img/h600.png) repeat-x: 
padding:20pxj 

margin:20px 0: 

width: 350px, 

-moz-border-radius :4px, 


h3 ( 
text-align:center: 
margin:0 0 10px 0: 


label, #inputs input, #inputs textarea, #inputs 
display: block: 

width: 200pxj 

float: left, 

margin-bottom: 10px, 


label ( 

text-align: right: 
width: 75px, 
padding-right: 20pxj 


br ( 
clear: left, 


font-family: tahoma: 
font-size: 12pxj 


a:active (| 
outline:none: 


) 


select 
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Focus “4 
-moZ-outline-style:none, 


) 


LANGKAH KEDUA 


Buat file dokumen html dengan format dasar seperti berikut: 


Shtml» 
Sheadb 

Ktitle?Tooltip«/title» 
«/head» 


«body» 


«/body» 
«/ html» 


LANGKAH KETIGA 


Panggil tools dan file javascript yang dibutuhkan, perhatikan skrip 
yang tercetak tebal berikut: 


Shtml» 
Sheadb 
«title»Tooltipx/title» 
Klink rel-"stylesheet" href-"css/tooltip2.css" type-"text/css"» 
Sscript type-"text/javascript" 
src-"jguery.tools.min. js" X/script» 
«/ head» 


«body» 


«/body» 
«/html» 


LANGKAH KEEMPAT 
Buat skrip jAuery berikut: 


«script type-"text/javascript"» 
S (document) . ready (function () ( 
S ("#myform :input") .tooltip (( 
position: "center right", 
offset: (-2, 101, 
effect: "fade", 
opacity: 0.7, 
tip: ".kooIktip" 


«/script» 


LANGKAH KELIMA 


Tambahkan skrip konten berikut pada tag body: 


«body» 


«div style-"opacity: 0.7: position: absolute: top: 298px, left: 
338px: display: none:" class-"tooltip" x/div» 

Sform id-"myform" action-"#"» 

«h32Formulir Pendaftaran«/h3» 

«div id-"inputs"» 


« 


label for-"username"»Username«/label? 
KSinput 


id-"username" title-"Username minimal 6 


karakter." «br» 


« 


label for-"password"»Password«/label? 
«input 


id-"password" type-"password" title-"Gunakan 


kombinasi angka dan huruf untuk memperkuat sandi" »«xbr» 


Klabel for-"email"»5Emailx/label? 

Kinput id-"email" title-"Email harus mengandung karakter 
titik (.) dan @."»-xbr» 

«label for-"body"»Pesan«/label» 

Ktextarea id-"body" title-"Tulis pesan Anda 


disini."»x«/textarea»xbr? 


« 


label for-"where"»Pilihan«/label» 


Kselect id-"where" title-"Pilih salah satu pilihan"» 


Koption»-- pilihan pertama --£/option» 
Koption»-- pilihan kedua --«/option» 
Koption»-- pilihan ketiga --£/option» 


«/select»xbrb 


«/divb 


Klabel»Saya menyatakan data sudah benar. 
Kinput type-"checkbox" id-"check" title-"Berikan tanda cek agar 
proses dapat dilanjutkan "» 


«/label» 

Kp3sbutton type-"button" title-"Klik tombol untuk proses 
data"»Proses«/button»X/p» 

«/ form 

«/body» 


Hasil skrip di atas akan menampilkan form tooltip seperti pada 


Gambar 2.25. 
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biss | akta Anal 
(LI file:///D:/Source?620Code/tooltip2.html | 4- | 5 


LL file:///D:/Source Code/tooltip2.html si c| “9- 22 ||: 


| 
Formulir Pendaftaran | 
Username | 


: Gunakan kombinasi angka dan huruf 
Email | 
Pesan 
Piihan — — pilihan pertama — - 


Saya menyatakan data sudah benar. ("1 


| 


Gambar 2.25 Hasil skrip tooltip form 


2.8 Expose 


Expose merupakan suatu efek yang akan membuat elemen menjadi 
terfokus bila kursor mouse diarahkan dan diklik pada daerah yang 
dituju sehingga hal tersebut akan membuat objek di sekelilingnya 
terlihat samar-samar. 


981 Expose Standar 


Sebagai gambaran awal, penulis akan memberikan contoh seperti 
berikut. 


Buat file dengan nama expose.html yang isinya seperti berikut: 


Shtml» 
Shead» 

KtitlebExposes/titler 

«script type-"text/javascript" 
srec-"jguery.tools.min.js"»«/script? 
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Kscript type-"text/javascript"» 
S (document) . ready (function () ( 
S("#texpose") .click (function () ( 
S (this) .expose(f(api: true)) .load(): 
Hi 
Hi 
«/sceript» 


Kstyle» 

#expose ( 
border: 1lpx solid #000: 
background-color: #fff: 
font-size: 20pxj 
padding: 50px, 
margin: 20px auto, 
text-align: center, 
width: 300px: 

, 

«/style» 

«/headb 


«body» 
«div id-"expose"» Klik disini «/div» 


«/body2 
«/html» 


Hasil skrip di atas akan menghasilkan efek expose seperti pada 
Gambar 2.26. 


Pat 3 
U Expose k 
Ga | DD file:///D:/Source Code/expose.html Sell 9-2: 


Klik disini 


Gambar 2.26 Hasil skrip expose.html 
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2.02 


Ex pose Form 


Kali ini kita akan mencoba untuk memberi efek expose pada form, 
namun pada expose ini kita akan menggunakan sedikit bantuan 


image. 


LANGKAH PERTAMA 


Buat file css dengan nama expose.css yang isinya seperti berikut: 


#mask ( 


) 


background:#678 url (img/mask gradient 1000.jpg): 


background-position:-260px -79pxj 


form.expose ( 


) 


label, 


label ( 


body £ 


Unicode", "bitstream vera sans","trebuchet ms",verdana: 


) 


border:lpx outset #ccc: 


background:#fff url (img/h150.png) repeat-x: 


padding:20pxj 
margin:20px 0: 
text-align:center: 
width: 350px, 


-moz-border-radius :4px, 


input ( 


display: block: 
width: 150px, 

float: left, 
margin-bottom: 10pxj 


text-align: right, 
width: 75px, 
padding-right: 20px, 


clear: left, 


padding:150px 50px, 
font-family: "Lucida 


a:active | 
outline:none: 


) 


focus 1 


-moZ-outline-style:none, 
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Grande", "Lucida 


Sans 


LANGKAH KEDUA 


Buat file dokumen html dengan nama expose2.html berikut: 


Shtml» 
Sheadb 

«title» Expose «/titler 
«/head» 


«body» 


«/body» 
«/ html» 


LANGKAH KETIGA 


Panggil file css yang telah dibuat beserta file javascript yang 
dibutuhkan, perhatikan skrip yang tercetak tebal berikut: 


Shtml» 
Sheadb 
Ktitle» Expose «/title» 
Klink rel-"stylesheet" href-"css/expose.css" type-"text/css"» 
Sscript type-"text/javascript" 
src-"jguery.tools.min. js" X/script» 
«/head» 


«body» 
«/body» 
«/ html» 


LANGKAH KEEMPAT 
Buat skrip jAuery berikut: 


Kscript type-"text/javascript"» 
S (document) . ready (function () ( 
S("form.expose") .bind ("click keydown", function () ( 
S (this) .expose (( 
maskId: 'mask', 
onLoad: function () ( 
this.getExposed () .css ( (backgroundColor: 
Teler" hi 
h, 
onClose: function () ( 
this.getExposed() .css ((backgroundColor: null)): 


api: true 
H).load U: 
Hi: 
Hi 
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«/script» 


LANGKAH KELIMA 
Tambahkan skrip konten pada tag body berikut: 


Xboay» 

Sform class-"expose"» 

«label for-"username"»Username«/label» 
Kinput id-"username" »xbr» 


«label for-"password"»Password«/label» 
Kinput id-"password" type-"password"»xbr» 


«/ form 


«/body2 


Hasil skrip di atas akan menampilkan form yang ter-expose seperti 
pada Gambar 2.27. 


- 


Username | 


Password 


Gambar 2.27 Hasil skrip expose2.html 
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2.9 Overlay 


Overlay hampir serupa dengan pasangannya, Expose. Hanya saja 
overlay background objek di sekelilingnya tidak lagi samar 
melainkan full tertutup. Kita akan mencoba menelusuri lebih dalam 
lagi mengenai trik overlay. 


991 Overlay Standar 


Kita akan coba untuk menampilkan kotak dialog untuk memberikan 
informasi atau peringatan, tapi pada kotak dialog tersebut sudah kita 
berikan teknik overlay, berikut langkahnya. 


LANGKAH PERTAMA 


Buat file css dengan nama overlay1.css yang isinya seperti berikut: 


a.activatorf 
width:153px, 
height:150px, 
position: absolute: 
top:0px, 
left:0px: 
background:#fff url(img/clickme.png) no-repeat top leftj 
z-index:lj 
cursor:pointerj 


) 


.overlayi 

background: transparent url (img/overlay.png) repeat top 
left, 

position:fixedj 

top:0px, 

bottom: 0pxj 

left:0px, 

right: 0px, 

z-index:100, 


.boxf 
position: fixed: 
top:-200px: 
left:3085: 
right:305j 
background-color:#fff, 
color: #TETFTFE: 
padding:20pxj 
border:2px solid #cccj 
-moz-border-radius: 20pxj 
-webkit-border-radius:20pxj 
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-khtml-border-radius:20pxj 
-moz-box-shadow: 0 1px 5px #333: 
-webkit-box-shadow: 0 Ipx 5px #333: 
z-index:101, 

) 


.box h1f 
border-bottom: 1px dashed #7F7F7F: 
margin:-20px -20px 0px -20pxj 
padding:10pxj 
background-color: #FFEFEF, 
color: #EE7771:j 
-moz-border-radius:20px 20px 0px Opx, 
-webkit-border-top-left-radius: 20px, 
-webkit-border-top-right-radius: 20px: 
-khtml-border-top-left-radius: 20px: 
-khtml-border-top-right-radius: 20px, 


) 


a.boxclosetf 
float:right, 
width:26pxj 
height :26px, 
background:transparent url (img/cancel.png) repeat top left: 
margin-top:-30px, 
margin-right:-30pxj 
cursor:pointerj 


LANGKAH KEDUA 


Buat dokumen html yang isinya sebagai berikut: 


Shtml» 
Sheadb 

Ktitle» Overlay «/title» 
«/head» 


«body» 


«/body» 
«/html» 


LANGKAH KETIGA 


Panggil file css dan javascript seperti berikut: 


Shtml» 
KSheadb 
«title» Overlay «/title» 
Klink rel-"stylesheet" href-"css/overlayl.css" type-"text/css"» 
KSscript type-"text/javascript" src-"development-bundle/ jguery- 
1.6.2. js" x«/script» 
«/head» 
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«body» 


«/body2 
«/ html» 


LANGKAH KEEMPAT 
Buat skrip jAuery seperti berikut: 


Kscript type-"text/javascript"» 
S(function () ( 
S ('#activator"') .click (function () | 
$S('#overlay') .fadeIn('fast', function () ( 
S ('#box') .animate (('top':'160px"),500) 
Hi 
Hj: 
S ('#boxclose') .click (function () | 
S('#box") .animate (('top':'-200px"),500, function () ( 
S('#overlay') .fade0ut ('fast'): 
Hi 
Hi: 
Hi 
«/script» 


LANGKAH KELIMA 


Langkah terakhir adalah menambahkan skrip konten pada tag body 
berikut: 


«body» 


«div class-"content"»Xa class-"activator" id-"activator" X/aX/div» 
«div class-"overlay" id-"overlay" style-"display:none:" X/div» 
«div class-"box" id-"box"» 

Ka class-"boxclose" id-"boxclose"»X«/a» 

«h12»Informasi«/h12» 

Sp?Akan segera hadir buku penulis "Trik Dahsyat Web Master 
PHP Plus HTML5 & CSS3" - Asfamediax/p» 
«/div2 


«/body» 


Hasil akhir dari skrip di atas akan menampilkan kotak dialog seperti 
pada Gambar 2.28. 
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Akan segera hadir buku penulis "Trik Dahsyat 
Web Master PHP Plus HTML5 & CSS3" - 
Asfamedia 


Gambar 2.28 Hasil skrip overlay1.html 


999 Overlay pada Gambar 


Apa jadinya jika overlay kita terapkan pada suatu gambar?.. beuh.. 
ga usah ditanya dah.. pasti keren sob.. ga percaya2d. Ayo kita 
buktikan. 


LANGKAH PERTAMA 


Buat file css yang isinya seperti berikut: 


#photos ( 
text-align:center, 


, 


#photos img ( 
cursor:pointer: 
margin:0 5pxj, 
background-color:t#fffj 
border:1lpx solid #cccj 
padding:2px, 
-moz-border-radius :4px, 
-webkit-border-radius:4px, 


) 


.details ( 
position:absolute: 
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) 


top:15px: 
right bps 
font-size:11lpxj 
color:#fff, 
width:150px, 


.details h3 ( 


) 


color: #aba: 
font-size:15px: 
margin:0 0 -10px 0: 


.simple overlay (| 


) 


display:none, 
z-index:10000: 
background-color:#333: 
width:430px, 
min-height:130px, 
border:lpx solid #666: 


-moz-box-shadow:0 0 90px 5px #000: 
-webkit-box-shadow: 0 0 90px #000: 


.simple overlay .close ( 
background-image:url (img/close.png) : 


) 


body £ 


position: absolute: 
rights-15pxs 
top:-15px, 
Cursor:pointerj 
height :35px, 
width: 35pxj 


padding:150px 50px, 
font-family: "Lucida 


Grande", "Lucida Sans 


Unicode", "bitstream vera sans","trebuchet ms",verdana: 


a:active (| 
outline:none: 


:focus ( 
-moZ-outline-style:none, 


LANGKAH KEDUA 


Siapkan dokumen html yang isinya seperti berikut: 


Shtml» 
Sheadb 


«/head» 


Ktitle» Overlay «/title» 
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«body» 


«/body2 
«/ html» 


LANGKAH KETIGA 


Panggil file css dan javascript yang telah dibuat sebelumnya. 


Shtml» 
Sheadb 
Ktitle» Overlay «/title» 
Klink rel-"stylesheet" href-"css/overlay2.css" type-"text/css"» 
Kscript type-"text/javascript" 
src-"jguery.tools.min. js" X/script» 
«/head» 


«body» 


«/body2 
«/html» 


LANGKAH KEEMPAT 
Buat skrip jAuery seperti berikut: 


Kscript type-"text/javascript"» 

$ (document) .ready (function () | 
S("img(relJ") .overlay(): 

Hi 

«/ script» 


LANGKAH KELIMA 


Langkah yang terakhir tentu saja kita tambahkan skrip konten pada 
tag body berikut: 


«body» 


«div id-"photos"» 
Kimg src-"asfamedia.jpg" rel-"#miesl"» 
Simg src-"asfa solution.jpg" rel-"#mies2"» 
«/div» 


«div class-"simple overlay" id-"mies1l"Xdiv class-"close" X/div» 
Simg src-"asfamedia. jpg" 


«div class-"details"» 

€h3»basfamedia«/h3br» 

Sp?Asfamedia adalah usaha yang bergerak dalam bidang 
penerbitan .«/p» 
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«/div2 
«/divz 


«div class-"simple overlay" id-"mies2"Xdiv class-"close" X/div» 
Simg src-"asfa solution. jpg"» 


«div class-"details"» 
«h35asfa Solution£/h3-xbr» 
«Sp?Asfa Solution adalah usaha yang bergerak dalam bidang 
Web Solution, jasa Web Design & programming.«/p? 
«/divs 
«/div 


«/body» 


Untuk melihat hasilnya, bisa Anda klik 2x pada file html yang telah 
dikerjakan. Akan tampil halaman yang menampilkan 2 buah gambar 
pada web browser, klik pada salah satu gambar maka gambar akan 
ter-overlay. Lihat Gambar 2.29. 
5 : — 
| D overlay 


€ Be LL) file:///D:/Source Code/overlay2.html bt c| | 2 - Goo? | 45 || IA: 


-- alas 


Asfa Solution 


Asfa Solution adalah usaha 
Un Uti On No yang bergerak dalam 
bidang Web Solution, jasa 
0) olution For Your Business Web Design & 
programming 


FA 1| ll | 
D media. Solutions | 


5 


Gambar 2.29 Hasil skrip overlay2.html 
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